<template>
  <div>
    <!-- 中间部分 -->
    <div class="banner" v-lazy:background-image="bgUrl_banner">
      <div class="banner-content container ">
        <div class="banner-content">
          <div class="banner-content-title">
            All Your Consideration <br> Delivered On Time
          </div>
          <div class="banner-content-text">
            我们可能是全美快递折扣最低、发货交付最简单的物流平台。我们帮助所有在美国从事电子商务或零售买卖的卖家、小型企业加速成长，包括利润的增长
          </div>
        </div>
      </div>
      <div class="container hidden-xs wow zoomInUp" style="display: flex;">
        <div class="banner-search">
          <div class="banner-search-title">
            <i class="el-icon-search" style="margin-right: 8px;font-size: 14px;" />测算
          </div>
          <el-form :model="ruleForm" size="medium" :rules="rules" ref="ruleForm" label-position="top" label-width="100px" class="col-flex">
            <el-form-item label="起运地邮编" prop="startingPoint" style="width: 130px;">
              <el-input placeholder="请输入" v-model="ruleForm.startingPoint" clearable />
            </el-form-item>
            <div class="banner-search-icon_01">
              <img class="img-responsive" v-lazy="require('@/assets/img/home/search_jiantou.png')" alt="" />
            </div>
            <el-form-item label="到达地邮编" prop="arrivalPoint" style="width: 130px; margin-right: 30px;">
              <el-input placeholder="请输入" v-model="ruleForm.arrivalPoint" clearable />
            </el-form-item>
            <el-form-item label="重量（选填）" style="width: 250px">
              <!-- <el-input placeholder="请输入" v-model="ruleForm.weight" clearable /> -->
              <el-select filterable clearable v-model="ruleForm.weight" placeholder="请选择" style="width:230px">
                <el-option v-for="(item,index) in weightList" :key="index" :label="item" :value="item" style="width: 230px" />
              </el-select>
            </el-form-item>
            <el-form-item >
              <div class="banner-search-button" @click="handleClick()">立即测算</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 业务简介 hidden-xs visible-xs -->
    <div class="introduction container hidden-xs">
      <div class="col-md-6 col-p-r-15 wow slideInLeft">
        <div class="col-sm-12">
          <img class="img-responsive" v-lazy="require('@/assets/img/home/img_left.png')" alt="" />
        </div>
        <div class="col-sm-12">
          <div class="introduction-h1">Our Story <br> You Succeed,We Succeed!</div>
          <div class="introduction-p">过去数年时间，我们与所有人一同见证了美国电商的惊人增长，以及极具潜力的未来。其中，大量 的小卖家及企业增长目标 和快速发货、交付需求往往容易被忽视。受此启发，我们设想：我们用一个平台帮助所有客户以足够低的运费喝足够低的交付服务成本，面向他们遍布全美家家户户，当他们获得成功的时候，我们也将获得成功。</div>
        </div>
      </div>
      <div class="col-md-6 col-p-l-15 wow slideInRight">
        <div class="col-sm-12">
          <img class="img-responsive" v-lazy="require('@/assets/img/home/img_right.png')" alt="" />
        </div>
        <div class="col-sm-12">
          <div class="introduction-h1">Building The Future, <br> Together!</div>
          <div class="introduction-p">我们是一支由电子商务及物流运输行业资深人士组成的、充满激情的团队，建立了一个创新的技术平台，并打造了一个由众多顶级物流承运商及第三方服务商，共同与电商卖家相互成就的物流供应商网络，为雄心勃勃的卖家们提供最佳的发货工具</div>
        </div>
      </div>
    </div>

    <!-- 为什么选择我们 -->
    <div class="whyChooseUs">
      <div class="container">
        <div class="whyChooseUs-title text-center">
          <p>为什么选择我们的服务</p>
          <p>Why Did You Choose US</p>
        </div>
      </div>
    </div>

    <!-- 为什么选择我们item -->
    <div>
      <div class="whyChoose">
        <div class="whyChoose-container container wow slideInUp">
          <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn col-p-r-35">
            <img class="img-responsive" v-lazy="require('@/assets/img/home/img_01.png')" alt="" />
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="whyChoose-title">
              低至1折的美国快递折扣<br>
              <div class="whyChoose-text">SHIPPING WITH HUGE DISCOUNT</div>
            </div>
            <div class="whyChoose-p">超省钱/超省时/超省事/超满意</div>
            <div class="whyChoose-p">用最少的时间、最简单的操作，即可在美国享受高达91%的限时独家优惠以及令人</div>
            <div class="whyChoose-p">满意的包裹跟踪管理体验。这可能是截至目前，全美价格最低的快递折扣平台</div>
            <div class="whyChoose-button">
              <div @click="handleClick()">更多优惠 <i class="el-icon-right" /></div>
            </div>
          </div>
        </div>
      </div>
      <div class="whyChoose col-bg-white hidden-xs">
        <div class="whyChoose-container container wow slideInUp">
          <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="whyChoose-title">
              独家运费优惠低至一折!<br>
              <div class="whyChoose-text">Discounts Up To90% Off</div>
            </div>
            <div class="whyChoose-p">在美国发快递，不再需要支付昂贵的快递运费，我们收费一直维持在全美业内最低，面向全美通用。超100种来自UPS FedEx、USPS以及其他货运快递公司的服务任您选
  择。</div>
            <div class="whyChoose-button">
              <div @click="handleClick()">更多优惠 <i class="el-icon-right" /></div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn col-p-l-35">
            <img class="img-responsive" v-lazy="require('@/assets/img/home/img_02.png')" alt="" />
          </div>
        </div>
      </div>
      <!-- xs-2 -->
      <div class="whyChoose visible-xs">
        <div class="whyChoose-container container wow slideInUp">
          <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn">
            <img class="img-responsive" v-lazy="require('@/assets/img/home/img_02.png')" alt="" />
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="whyChoose-title">
              独家运费优惠低至一折<br>
              <div class="whyChoose-text">Discounts Up To90%</div>
            </div>
            <div class="whyChoose-p">在美国发快递，不再需要支付昂贵的快递运费，我们收费一直维持在全美业内最低，面向全美通用。超100种来自UPS FedEx、USPS以及其他货运快递公司的服务任您选
  择。</div>
            <div class="whyChoose-button">
              <div @click="handleClick()">更多优惠 <i class="el-icon-right" /></div>
            </div>
          </div>
        </div>
      </div>
      <div class="whyChoose">
        <div class="whyChoose-container container wow slideInUp">
          <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn col-p-r-35">
            <img class="img-responsive" v-lazy="require('@/assets/img/home/img_03.png')" alt="" />
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="whyChoose-title">
              不再为发货浪费时间!<br>
              <div class="whyChoose-text">Never Waste Time on Shipping Again</div>
            </div>
            <div class="whyChoose-p">通过我们的软件能够直观的比较各类美国快递</div>
            <div class="whyChoose-button">
              <div @click="handleClick()">更多优惠 <i class="el-icon-right" /></div>
            </div>
          </div>
        </div>
      </div>
      <div class="whyChoose col-bg-white hidden-xs">
        <div class="whyChoose-container container wow slideInUp">
          <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="whyChoose-title">
              一键节省9成以上运费!<br>
              <div class="whyChoose-text">Save More Than 90% Of The Cost by one click</div>
            </div>
            <div class="whyChoose-p">简单输入收发地址、灵活调整包事规格，实时比较全美各大项级快递公司超100+款服务的优惠价格，一览所有最优惠的完整发货方案，准确可靠且免费。无须再反复查找、无须再四处问询报价、无须研究报价规则</div>
            <div class="whyChoose-button">
              <div @click="handleClick()">更多优惠 <i class="el-icon-right" /></div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn col-p-l-35">
            <img class="img-responsive" v-lazy="require('@/assets/img/home/img_04.png')" alt="" />
          </div>
        </div>
      </div>
      <!-- xs-4 -->
      <div class="whyChoose visible-xs">
        <div class="whyChoose-container container wow slideInUp">
          <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn col-p-l-35">
            <img class="img-responsive" v-lazy="require('@/assets/img/home/img_04.png')" alt="" />
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="whyChoose-title">
              一键节省9成以上运费!<br>
              <div class="whyChoose-text">Save More Than 90% Of The Cost by one click</div>
            </div>
            <div class="whyChoose-p">简单输入收发地址、灵活调整包事规格，实时比较全美各大项级快递公司超100+款服务的优惠价格，一览所有最优惠的完整发货方案，准确可靠且免费。无须再反复查找、无须再四处问询报价、无须研究报价规则</div>
            <div class="whyChoose-button">
              <div @click="handleClick()">更多优惠 <i class="el-icon-right" /></div>
            </div>
          </div>
        </div>
      </div>
      <div class="whyChoose">
        <div class="whyChoose-container container wow slideInUp">
          <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn col-p-r-35">
            <img class="img-responsive" v-lazy="require('@/assets/img/home/img_05.png')" alt="" />
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="whyChoose-title">
              几分钟内发出所有包裹<br>
              <div class="whyChoose-text">EVERYTHING YOU SHIPIN MINUTES</div>
            </div>
            <div class="whyChoose-p">极简操作/方法灵活/实时比价/资料齐全</div>
            <div class="whyChoose-p">导入订单、选择最佳的快递公司服务报价、并生成运单及发货文档，即可全美范围内随时发货。</div>
            <div class="whyChoose-button">
              <div @click="handleClick()">更多优惠 <i class="el-icon-right" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要功能 -->
    <div class="majorFunction">
      <div class="whyChooseUs">
        <div class="container">
          <div class="whyChooseUs-title text-center">
            <p>主要功能</p> 
            <p>Major Function</p>
          </div>
        </div>
      </div>
      <div class="majorList container">
        <div class="majorItem wow zoomInLeft">
          <div class="majorItem-title">2种创建货件方法</div>
          <div class="majorItem-text">·单次发货<br>·批量上传</div>
          <div class="majorItem-item">
            <div>数据发布</div>
            <div>数据查询</div>
            <div>数据统计</div>
          </div>
          <div class="majorItem-button" @click="handleClick()">立即使用</div>
        </div>

        <div class="majorItem wow zoomInUp">
          <div class="majorItem-title">即时比较运费</div>
          <div class="majorItem-text">提供UPS、FedEx、USPS等登机快递公司提供的100种运输解决方案，最高可节省91&</div>
          <div class="majorItem-item">
            <div>最高折扣</div>
            <div>签收时效</div>
            <div>轨迹跟踪</div>
          </div>
          <div class="majorItem-button" @click="handleClick()">立即使用</div>
        </div>

        <div class="majorItem wow zoomInRight">
          <div class="majorItem-title">自主生成发货文件</div>
          <div class="majorItem-text">自动生成快递发货所需的所有文件，包括面向您客户提供所需的发货清单等。</div>
          <div class="majorItem-item">
            <div>数据发布</div>
            <div>数据查询</div>
            <div>数据统计</div>
          </div>
          <div class="majorItem-button" @click="handleClick()">立即使用</div>
        </div>
      </div>

      <div class="majorCard container">
        <div class="majorCard-item wow zoomInLeft" style="width: 50%;">
          <img class="img-responsive" v-lazy="require('@/assets/img/home/free.png')" alt="" />
          <div>
            <div class="majorCard-item-title">使用我们的平台是完全免费</div>
            <div class="majorCard-item-text">除了所需支付的快递运费外，所有以上这些超出期望的功能都将免费开放给所有注册客户使用，没有任何额外条件及费用</div>
          </div>
        </div>
        <div class="majorCard-item wow zoomInRight" style="width: 50%;">
          <img class="img-responsive" v-lazy="require('@/assets/img/home/discounts.png')" alt="" />
          <div>
            <div class="majorCard-item-title">运费测算工具:挖掘1折优惠</div>
            <div class="majorCard-item-text">我们的运费成本测算工具助你节省时间，免却了繁复冗长的比价过程和资料搜集工作。根据你的发货需要，我们的工具集合了全美多家快递公司最优惠的运费数据。</div>
          </div>
        </div>
      </div>
    </div>

    <!-- footer -->
    <Footer></Footer> 

    <!-- LoginDialog -->
    <LoginDialog ref="refLoginDialog" :dialogVisible.sync="loginShow" @closeSpecial="handleClose" />

  </div>
</template>
<script>
import { WOW } from 'wowjs';
import LoginDialog from '@/components/LoginDialog'
import bgUrl_banner from '@/assets/img/home/bg.png'

export default {
  name: "Home",
  components: { LoginDialog },
  data() {
    return {
      // 登录弹窗
      loginShow: false,
      // 懒加载背景图
      bgUrl_banner: bgUrl_banner,
      // 重量
      weightList: [],
      // 测算form
      ruleForm: {
        startingPoint: '',
        arrivalPoint: '',
        weight: ''
      },
      // 测算rule
      rules: {
        startingPoint: [
          { required: true, message: '请选择起运地邮编', trigger: 'change' }
        ],
        arrivalPoint: [
          { required: true, message: '请选择到达地邮编', trigger: 'change' }
        ],
      },
    };
  },
  mounted() {
    /* wowjs动画 */
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    })
    wow.init();
    this.generateSelList()
  },
  methods: {
    // 开启弹窗
    handleClick() {
      this.loginShow = true
      this.$refs.refLoginDialog.getWxLogin()
    },
    // 关闭登录弹窗
    handleClose() {
      this.loginShow = false
    },
    generateSelList() {
      // 1oz
      // 2oz
      // ...
      // 15oz
      // 1lbs
      // 2lbs
      // ...
      // 150lbs
      let ozArr = Array.from(Array(16),(v,k) => k + 'oz').slice(1)
      let lbsArr = Array.from(Array(151),(v,k) => k + 'LBS').slice(1)
      const arr = ozArr.concat(lbsArr)
      this.weightList = arr
    }
  }
};
</script>
<style lang="scss" scoped>
/* 整体盒子 */
#HomePage {
  width: 100%;
}

/* 中间的 */ 
.banner {
  position: relative;
  // background: url(../assets/img/home/bg.png) no-repeat;
  background-repeat: no-repeat;
  // background-size: 100% auto;
  // width: 100%;
  background-size: contain;
  max-width: 1790px;
  height: 580px;
  margin: auto;
  // 适配手机端
  @media (max-width:767px) {
    height: 500px !important;
    background-size: 810px 280px !important;
    background-position: -330px 0px !important;
    &-content {
      margin-top: 50px !important;
      padding: 110px 0 0 0 !important;
      text-align: center;
      &-title {
        font-size: 26px !important;
        line-height: 35px !important;
      }
      &-text {
        width: 100% !important;
        line-height: 25px !important;
        margin: 10px 0 0 0 !important;
        padding: 0 15px;
        font-size: 14px !important;
      }
    }
  }
  // 内容介绍
  &-content {
    padding: 57px 0 0 0;
    &-title {
      font-size: 38px;
      font-weight: 900;
      color: #161C2D;
      line-height: 50px;
    }
    &-text {
      width: 450px;
      line-height: 22px;
      font-size: 12px;
      font-weight: 400;
      color: #161C2D;
      margin: 20px 40px 0 0;
    }
  }
  // 测算
  &-search {
    position: relative;
    margin: 105px auto;
    // width: 61%;
    height: 120px;
    border-radius: 10px;
    padding: 25px 20px 25px 24px;
    background: #FFFFFF;
    box-shadow: 0px 4px 30px 0px rgba(0,0,0,0.15);
    filter: blur(0px);
    &-title {
      position: absolute;
      top: -10px;
      width: 140px;
      height: 36px;
      padding: 5px 0 0 25px;
      color: #fff;  
      font-size: 14px;
      background: url(../assets/img/home/search_title.png) no-repeat;
      background-size: 85% auto;
      z-index: 1;
    }
    .col-flex {
      display: flex;
    }
    &-icon_01 {
      margin: 46px 4px 0 10px;
      img {
        width: 75%;
        height: auto;
      }
    }
    &-button {
      width: 110px;
      text-align: center;
      background: #FF7F43;
      color: #FFFFFF;
      font-size: 12px;
      border-radius: 4px;
      // padding: 3px 35px;
      margin: 35px 0 0 15px;
      cursor: pointer;
      &:hover {
        background: rgba(255, 127, 67,0.8);
      }
    }
    ::v-deep .el-input--suffix .el-input__inner {
      background: #f6f6fa !important;
      border: 1px solid #f6f6fa !important;
    }
    ::v-deep .el-form--label-top .el-form-item__label {
      padding: 0 !important;
      height: 30px !important;
      color: #333333 !important;
      font-weight: 400 !important;
      font-size: 14px !important;
    }
    ::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
      content: "";
      color: #F56C6C;
      margin-right: 4px;
    }
    ::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
      content: "*";
      color: #F56C6C;
      margin-right: 4px;
      margin-left: 4px;
    }
  }
}

/* 业务简介 */
.introduction {
  transition: all ease 0.6s;
  box-sizing: border-box;
  margin-bottom: 90px;
  @media (max-width:767px) {
    .col-p-r-15 {
      padding-bottom: 50px !important;
    }
  }
  .col-p-r-15 {
    padding-right: 15px;
  }
  .col-p-l-15 {
    padding-left: 15px;
  }
  &-h1 {
    line-height: 36px;
    font-size: 30px;
    font-family: Arial-BoldMT, Arial;
    font-weight: normal;
    margin: 25px 0 12px 0;
    color: #161C2D;
  }
  &-p {
    line-height: 22px;
    color: #161C2D;
    font-size: 12px;
    letter-spacing: -0.2px;
  }
  // 适配手机端
  @media (max-width:767px) {
    .col-p-r-15 {
      padding-right: 0px !important;
      padding-bottom: 50px !important;
    }
    .col-p-l-15 {
      padding-left: 0px !important;
      padding-bottom: 50px !important;
    }
    &-h1 {
      margin: 30px 0 20px 0 !important;
    }
  }
}

/* 为什么选择我们 */
.whyChooseUs {
  &-title {
    margin-bottom: 40px;
  }
  &-title p:nth-of-type(1) {
    font-size: 36px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #161C2D;
    line-height: 42px;
  }
  &-title p:nth-of-type(2) {
    font-size: 30px;
    font-family: ArialMT;
    color: #5F5D5D;
    line-height: 45px;
  }
  // 适配手机端
  @media (max-width:767px) {
    &-title {
      margin-bottom: 30px !important;
    }
    &-title p:nth-of-type(1) {
      font-size: 32px !important;
      line-height: 45px !important;
      margin-bottom: 0px !important;
    }
    &-title p:nth-of-type(2) {
      font-size: 24px;
    }
  }
}
.col-bg-white {
  background-color: #fff !important;
}
.col-flex-start {
  padding-left: 35px;
}
.col-flex-end {
  display: flex;
  justify-content: flex-end;
}
.col-p-l-35 {
  padding-left: 35px;
}
.col-p-r-35 {
  padding-right: 35px;
}
/* 为什么选择我们item */
.whyChoose {
    display: flex;
    align-items: center;
    padding: 48px 0;
    -webkit-transition: all ease 0.6s;
    transition: all ease 0.6s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fafafa;
    &-container {
      display: flex;
      align-items: center;
    }
    &-title {
      color: #161C2D;
      font-size: 30px;
      padding-bottom: 10px;
    }
    &-text {
      color: #666;
      font-size: 26px;
    }
    &-p {
      color: #161C2D;
      font-size: 12px;
      font-weight: 500;
      line-height: 25px;
    }
    &-button {
      display: flex;
      div {
        text-align: center;
        background: #FF7F43;
        color: #FFFFFF;
        font-size: 12px;
        border-radius: 2px;
        padding: 8px 15px;
        margin: 20px 14px 0 0;
        cursor: pointer;
        &:hover {
          background: rgba(255, 127, 67,0.8);
        }
      }
    }
    // 适配手机端
    @media (max-width:767px) {
      padding: 30px 0 !important;
      &-container {
        display: flex;
        flex-direction: column;
        padding: 0 20px !important;
      }
      &-title {
        font-size: 30px !important;
        padding: 10px 0;
      }
      &-text {
        font-size: 24px !important;
      }
      &-button {
        justify-content: center;
      }
      .col-p-r-35 {
          padding-right: 0px !important;
      }
    }
}

/* 主要功能 */ 
.majorFunction {
  padding-top: 94px;
  // 适配手机端
  @media (max-width:767px) {
    padding-top: 40px !important;
  }
  // list 
  .majorList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 46px;
    // 适配手机端
    @media (max-width:767px) {
      flex-direction: column;
      margin-bottom: 10px !important;
      .majorItem {
        width: 100% !important;
        margin-bottom: 30px !important;
        &-text {
          height: 150px !important;
          padding-top: 20px !important;
        }
      }
    }
    .majorItem {
      width: 32%;
      padding: 32px 30px;
      background: #FFFFFF;
      box-shadow: 0px 4px 30px 0px rgba(0,0,0,0.1);
      filter: blur(0px);
      &-title {
        font-size: 22px;
        font-weight: 500;
        color: #161C2D;
      }
      &-text {
        height: 112px;
        font-size: 14px;
        color: #333333;
        line-height: 22px;
        padding-top: 26px;
      }
      &-item {
        display: flex;
        div {
          font-size: 10px;
          color: #FF7F43;
          padding: 5px 13px;
          margin-right: 10px;
          background: rgba(255, 127, 67,0.08)
        }
      }
      &-button {
        text-align: center;
        background: #FF7F43;
        color: #FFFFFF;
        font-size: 12px;
        border-radius: 4px;
        padding: 10px 35px;
        margin-top: 30px;
        cursor: pointer;
        &:hover {
          background: rgba(255, 127, 67,0.8);
        }
      }
    }
    .majorItem:nth-child(2) {
      margin: 0 3%;
    }
  }
  // Card 
  .majorCard {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 90px;
    &-item {
      display: flex;
      align-items: center;
      padding: 33px 30px;
      background: #FFFFFF;
      box-shadow: 0px 4px 30px 0px rgba(0,0,0,0.1);
      filter: blur(0px);
      img {
        width: 764x;
        height: 74px;
        margin-right: 25px;
      }
      &-title {
        font-size: 24px;
        font-weight: 600;
        color: #161C2D;
      }
      &-text {
        font-size: 12px;
        color: #333333;
        line-height: 22px;
        padding-top: 10px;
      }
    }
    &-item:nth-child(1) {
      margin-right: 20px;
    }
    // 适配手机端
    @media (max-width:767px) {
      flex-direction: column;
      margin-bottom: 30px !important;
      &-item {
        width: 100% !important;
        margin-bottom: 30px !important;
        margin-right: 0px !important;
        padding: 25px 20px !important;
      }
      img {
        width: 60px !important;
        height: 60px !important;
      }
      &-title {
        font-size: 18px !important;
      }
    }
  }
}
</style>

